import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class Test_Scrollable extends StatefulWidget {
  const Test_Scrollable({super.key});

  @override
  State<Test_Scrollable> createState() => _Test_ScrollableState();
}

class _Test_ScrollableState extends State<Test_Scrollable> {
  // 创建一个 ScrollController 用于控制滚动
  final ScrollController _scrollController = ScrollController();

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Scrollable 示例")),
      // scrollable提供滑动能力，向外部暴露offset
      body: Scrollable(
        controller: _scrollController,
        axisDirection: AxisDirection.down, // 垂直滚动
        viewportBuilder: (BuildContext context, ViewportOffset offset) {
          // Viewport 提供offset属性，内部自行处理offset 告知slivers处理
          return Viewport(
            offset: offset,
            axisDirection: AxisDirection.down,
            slivers: [
              SliverAppBar(
                pinned: true,
                expandedHeight: 200,
                flexibleSpace: FlexibleSpaceBar(title: Text('Sliver AppBar')),
              ),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                      (context, index) => ListTile(title: Text('Item #$index')),
                  childCount: 100,
                  // findChildIndexCallback: (Key key) {
                  //   final ValueKey valueKey = key as ValueKey;
                  //   return items.indexWhere((item) => item.id == valueKey.value);
                  // },
                ),

              ),
              SliverGrid(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                ),
                delegate: SliverChildBuilderDelegate(
                      (context, index) => Container(color: Colors.blue),
                  childCount: 20,
                ),
              ),
              // SliverList(
              //   delegate: SliverChildBuilderDelegate(
              //         (context, index) {
              //       return Container(
              //         height: 80,
              //         color: index.isEven ? Colors.blue[100] : Colors.green[100],
              //         alignment: Alignment.center,
              //         child: Text(
              //           "Item $index",
              //           style: const TextStyle(fontSize: 20),
              //         ),
              //       );
              //     },
              //     childCount: 30, // 列表数量
              //   ),
              // ),
            ],
          );

        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 点击按钮自动滚动到 500 像素位置
          _scrollController.animateTo(
            500,
            duration: const Duration(seconds: 1),
            curve: Curves.easeOut,
          );
        },
        child: const Icon(Icons.arrow_downward),
      ),
    );
  }
}
